<template>
  <view class="announcement-list-page">
    <!-- 顶部导航栏 -->
    <view class="page-header">
      <view class="header-inner">
        <view class="back-btn" @click="handleBack">
          <FaIcon name="arrow-left" color="#1f2937" :size="36" />
        </view>
        <text class="header-title">通知公告</text>
        <view class="search-btn" @click="handleSearch">
          <FaIcon name="search" color="#1f2937" :size="36" />
        </view>
      </view>
    </view>

    <!-- 分类筛选 -->
    <view class="filter-bar">
      <scroll-view scroll-x class="filter-scroll" :show-scrollbar="false">
        <view class="filter-list">
          <view 
            v-for="(filter, index) in filters" 
            :key="index"
            :class="['filter-item', { active: currentFilter === filter.value }]"
            @click="handleFilterChange(filter.value)"
          >
            <text class="filter-text">{{ filter.label }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 公告列表 -->
    <scroll-view scroll-y class="content-scroll">
      <view class="announcement-list">
        <view 
          v-for="item in filteredAnnouncements" 
          :key="item.id"
          class="announcement-card"
          @click="handleViewDetail(item)"
        >
          <view class="card-header">
            <view :class="['type-badge', `type-${item.type}`]">
              <text class="badge-text">{{ getTypeName(item.type) }}</text>
            </view>
            <view v-if="item.isNew" class="new-badge">
              <text class="new-text">NEW</text>
            </view>
          </view>
          
          <text class="card-title">{{ item.title }}</text>
          <text class="card-content">{{ item.content }}</text>
          
          <view class="card-footer">
            <text class="footer-text">
              <FaIcon name="clock-o" color="#9ca3af" :size="20" />
              {{ item.time }}
            </text>
            <text class="footer-text">
              <FaIcon name="eye" color="#9ca3af" :size="20" />
              {{ item.views }}
            </text>
          </view>
        </view>

        <!-- 空状态 -->
        <view v-if="filteredAnnouncements.length === 0" class="empty-state">
          <FaIcon name="list-alt" color="#d1d5db" :size="160" />
          <text class="empty-text">暂无公告</text>
        </view>
      </view>

      <!-- 底部安全区 -->
      <view class="safe-bottom"></view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import FaIcon from '@/components/common/FaIcon.vue'

// 筛选项
const filters = ref([
  { label: '全部', value: 'all' },
  { label: '政策通知', value: 'policy' },
  { label: '活动福利', value: 'activity' },
  { label: '系统通知', value: 'system' },
  { label: '重要公告', value: 'important' }
])

// 当前筛选
const currentFilter = ref('all')

// 公告数据
const announcements = ref([
  {
    id: 1,
    type: 'policy',
    title: '2024年农业补贴政策发布',
    content: '最新农业补贴政策已出台，符合条件的企业可申请相关补贴。政策包括种植补贴、农机购置补贴、绿色农业发展补贴等多个方面。',
    time: '今天 14:30',
    views: '1.2k',
    isNew: true
  },
  {
    id: 2,
    type: 'activity',
    title: '新用户注册福利活动',
    content: '新用户注册即送服务优惠券，价值200元，可用于平台内所有服务消费。活动时间有限，快来领取吧！',
    time: '昨天 10:15',
    views: '856',
    isNew: true
  },
  {
    id: 3,
    type: 'system',
    title: '平台系统升级通知',
    content: '为了给您提供更好的服务体验，平台将于本周六凌晨2:00-6:00进行系统升级维护，期间部分功能可能受影响。',
    time: '2天前',
    views: '2.3k',
    isNew: false
  },
  {
    id: 4,
    type: 'important',
    title: '农产品质量安全管理规定',
    content: '关于加强农产品质量安全管理的重要通知，所有服务商需严格遵守相关规定，确保农产品质量安全。',
    time: '3天前',
    views: '3.5k',
    isNew: false
  },
  {
    id: 5,
    type: 'policy',
    title: '农业技术培训补贴申请',
    content: '农业技术培训补贴开始申请，符合条件的农业从业者可获得最高5000元的培训补贴。',
    time: '5天前',
    views: '1.8k',
    isNew: false
  },
  {
    id: 6,
    type: 'activity',
    title: '春季农资采购优惠活动',
    content: '春季农资采购大促销，化肥、农药、种子等全场8折优惠，满额还有额外赠品。',
    time: '1周前',
    views: '1.5k',
    isNew: false
  }
])

// 过滤后的公告
const filteredAnnouncements = computed(() => {
  if (currentFilter.value === 'all') {
    return announcements.value
  }
  return announcements.value.filter(item => item.type === currentFilter.value)
})

// 获取类型名称
const getTypeName = (type) => {
  const typeMap = {
    policy: '政策通知',
    activity: '活动福利',
    system: '系统通知',
    important: '重要公告'
  }
  return typeMap[type] || '通知'
}

// 事件处理
const handleBack = () => {
  uni.navigateBack()
}

const handleSearch = () => {
  uni.showToast({
    title: '搜索功能开发中...',
    icon: 'none'
  })
}

const handleFilterChange = (value) => {
  currentFilter.value = value
}

const handleViewDetail = (item) => {
  uni.navigateTo({
    url: `/pages/yjyny/announcement/detail?id=${item.id}`
  })
}
</script>

<style lang="scss" scoped>
.announcement-list-page {
  min-height: 100vh;
  background: linear-gradient(to bottom right, #f8fafc, #f1f5f9, #f9fafb);
}

// 顶部导航栏
.page-header {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12rpx);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 2rpx solid #f3f4f6;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.header-inner {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx;
  gap: 24rpx;
}

.back-btn,
.search-btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

.back-btn:active,
.search-btn:active {
  background-color: #f3f4f6;
}

.header-title {
  flex: 1;
  font-size: 32rpx;
  font-weight: bold;
  color: #1f2937;
}

// 分类筛选
.filter-bar {
  background-color: #ffffff;
  padding: 24rpx 32rpx;
  border-bottom: 2rpx solid #f3f4f6;
}

.filter-scroll {
  white-space: nowrap;
}

.filter-list {
  display: inline-flex;
  gap: 16rpx;
}

.filter-item {
  padding: 12rpx 32rpx;
  border-radius: 48rpx;
  background-color: #f3f4f6;
  transition: all 0.3s;
  
  &.active {
    background-color: #10b981;
    
    .filter-text {
      color: #ffffff;
      font-weight: bold;
    }
  }
}

.filter-text {
  font-size: 24rpx;
  color: #6b7280;
  white-space: nowrap;
}

// 内容滚动区
.content-scroll {
  height: calc(100vh - 180rpx);
}

// 公告列表
.announcement-list {
  padding: 32rpx;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.announcement-card {
  background-color: #ffffff;
  border-radius: 32rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  border: 2rpx solid #f3f4f6;
  transition: all 0.3s;
}

.announcement-card:active {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 16rpx;
}

.type-badge {
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  
  &.type-policy {
    background-color: rgba(16, 185, 129, 0.1);
    
    .badge-text {
      color: #10b981;
    }
  }
  
  &.type-activity {
    background-color: rgba(245, 158, 11, 0.1);
    
    .badge-text {
      color: #f59e0b;
    }
  }
  
  &.type-system {
    background-color: rgba(6, 182, 212, 0.1);
    
    .badge-text {
      color: #06b6d4;
    }
  }
  
  &.type-important {
    background-color: rgba(239, 68, 68, 0.1);
    
    .badge-text {
      color: #ef4444;
    }
  }
}

.badge-text {
  font-size: 20rpx;
  font-weight: bold;
}

.new-badge {
  padding: 6rpx 12rpx;
  border-radius: 6rpx;
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.new-text {
  font-size: 18rpx;
  font-weight: bold;
  color: #ffffff;
}

.card-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 16rpx;
  line-height: 1.4;
}

.card-content {
  font-size: 26rpx;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 24rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-footer {
  display: flex;
  align-items: center;
  gap: 32rpx;
  padding-top: 16rpx;
  border-top: 2rpx solid #f3f4f6;
}

.footer-text {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 22rpx;
  color: #9ca3af;
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}

.empty-text {
  margin-top: 32rpx;
  font-size: 28rpx;
  color: #9ca3af;
}

// 底部安全区
.safe-bottom {
  height: 160rpx;
}
</style>
